<template>
	<div v-if="flag==1">
	
			<el-input v-model="teaNum" style="margin-left: 15px;" placeholder="请输入教师编号"></el-input>
			<el-input v-model="teaName" placeholder="请输入教师姓名"></el-input>
			<el-input v-model="titleName"placeholder="请输入教师职称"></el-input>
			<el-button class="searchBtn" type="info" :icon="Search" @click="teaSearch()" >搜索</el-button>
			<el-button class="addBtn" type="info" :icon="CirclePlus" @click="flagAdd()">添加</el-button>
		<el-table :data="newRes">
			<el-table-column label="教师编号" prop="teaNum" align="center"></el-table-column>
			<el-table-column label="姓名" prop="teaName" align="center"></el-table-column>
			<el-table-column label="教师职称" prop="titleName" align="center"></el-table-column>
			<el-table-column label="联系方式" prop="teaPhone" align="center"></el-table-column>
				<el-table-column label="操作" align="center">
					<template #default="{row}">
						<span style="color:#106ab1;cursor:pointer" @click="flagChange(row)">修改</span>
						<span style="color: #ff0000;cursor:pointer;margin-left: 10px" @click="Delete1(row.teaId)">删除</span>
					</template>
				</el-table-column>
		</el-table>
		<el-pagination
			layout="prev,pager,next" 
			:page-count="total" 
			:page-size="pageSize" 
			v-model:current-page="pageIndex"
			@current-change="changePage"
		></el-pagination>
	</div>
	<!-- 删除模态框 -->
	<el-dialog
	    v-model="dialogVisible"
	    title="提示"
	    width="400"
	  >
	    <div style="text-align: center;">
			确认删除教师吗？
		</div>
	    <template #footer>
	      <div class="dialog-footer">
			  <el-button type="info" @click="delatesure" style="background-color: #106ab1;color: white;">
			    确认
			  </el-button>
	        <el-button @click="dialogVisible = false" type="info" >取消</el-button>
	      </div>
	    </template>
	  </el-dialog>
	
	
	<teacherChange v-if="flag==2" @che="che"></teacherChange>
	<teacherAdd v-if="flag==3" @che="che"></teacherAdd>
</template>

<script setup lang="ts">
		import {Search,CirclePlus} from '@element-plus/icons-vue'
		import { onMounted, reactive, ref } from 'vue';
		import type {teacherType} from "../modal/user";
		import {useRoute,useRouter} from 'vue-router';
		import {teacherDetail,teacherSearch,teacherdelate} from "@/api/lqy";
		import teacherChange from"./teacherChange.vue"
		import teacherAdd from"./teacherAdd.vue"
		import { ElMessage } from "element-plus";
		
		// let page=ref("1")
		// let size=ref("5")
		let teaNum=ref('')
		let teaName=ref('')
		let titleName=ref('')
		const router = useRouter()
		const route = useRoute()
		let flag=ref(1)
		const pageIndex=ref<number>(1)
		const pageSize=ref<number>(5)
		let total=ref(0)
		let newRes=ref([])
		const teacherGet:teacherType=async()=>{
			let res=await teacherDetail({
				pageIndex:pageIndex.value,
				pageSize:pageSize.value,
			})
			// console.log("教师列表",res)
			newRes.value=res?.Tealist
			// console.log(newRes.value)
			total.value=res.total
			// console.log(res.total)
		}
		// teacherGet()
		onMounted(()=>{
			teaSearch()	
		})
		const flagChange=(v)=>{
			sessionStorage.setItem('Detail',v.teaId)
			flag.value=2
		}
		const flagAdd=(v)=>{
			flag.value=3
		}
		const che = () => {
			teaSearch()
			flag.value = 1
			// console.log(flag.value)
		}
		//删除教师
		let dialogVisible=ref(false)
		const Delete1=(v)=>{
			// console.log(v)
			sessionStorage.setItem("teaID",v)
			dialogVisible.value=true
		}
		//确认删除
		const delatesure=async()=>{
			let res=await teacherdelate({
				teaId:sessionStorage.getItem("teaID")
			})
			// console.log("删除教师",res)
			ElMessage.success("删除成功")
			setTimeout(() => {
				che()
			}, 500)
			
			teaSearch()
			dialogVisible.value=false
		}
		
		
		const changePage = (page) => {
			pageIndex.value = page;
			// console.log(pageIndex.value)
			// teacherGet()
			teaSearch()	
		}
		const teaSearch=async()=>{
			let res =await teacherSearch({
				page:String(pageIndex.value),
				size:String(pageSize.value),
				teaNum:teaNum.value,
				teaName:teaName.value,
				titleName:titleName.value
			})
			newRes.value=res.teachers
			total.value=res.totalPages
			// console.log(newRes.value)
		}
</script>

<style scoped>
	/* 表格距顶部的距离 */
	    .el-table{
	        margin-top: 20px;
	    }
	    .el-table{
	        --el-table-border-color:none;
	        --el-table-borde:none;
	        --el-table-bg-color:none !important;    
	        --el-table-header-bg-color:#f3f8fd;
	        --el-table-header-text-color:#333 !important
	    }
	    /* 表格间隙 */
	    :deep(.el-table__body) {
	      -webkit-border-vertical-spacing: 9px;
	    }

	  .el-input{
	         width: 205px;
	         margin-right: 10px;
	         border: none;
	     }
	     .searchBtn{
	         background-color: #106ab1;
	         border: none;
	     }
	     .addBtn{
	         background-color: #00a0e9;
	         border: none;
	         float: right;
	         margin-right: 20px;
	     }
		.el-pagination{
		        --el-pagination-bg-color:none;
		        --el-pagination-button-disabled-bg-color:none;
		        justify-content: center;
		    }
</style>